<template>
    <view class="page">
      <view class="section">
        <text class="font text pos">选择成员</text>
        <view class="divider pos_2"></view>
			<view style="height: 160rpx;"></view>
				<view class="section_2"
				style="display: flex; flex-direction: row; justify-content: flex-start; align-items:center;">
				    <image class="pic" :src="curr.avator"></image>
				    <view style="margin-left:10rpx;display: flex;flex-direction: column;justify-content: flex-start;">
				        <text class="font text_2" style="margin-bottom: 30rpx;">{{ curr.name }}</text>
				    </view>
						<text>当前用户</text>
				</view>
				<!-- 间距 -->
				<view class="spacer"></view>
        <view v-for="(user, index) in users" :key="index">
            <!-- 用户卡片 -->
            <view class="section_2" 
						style="display: flex; flex-direction: row; justify-content: flex-start; align-items:center;"
						@click="pickMem(user)">
                <image class="pic" :src="user.avator"></image>
                <view style="margin-left:10rpx;display: flex;flex-direction: column;justify-content: flex-start;">
                    <text class="font text_2" style="margin-bottom: 30rpx;">{{ user.name }}</text>
                    <text class="text_3" style="margin-left: 10rpx;">
										{{ user.sex }} | {{user.birthday}} | {{user.height}}cm| {{user.weight}}kg
										</text>
                </view>
								<view class="wrapper" v-if="user.id == this.$store.state.user.currId">
								    <text class="font text_3" style="color: white;">当前用户</text>
								</view>
            </view>
            <!-- 间距 -->
            <view class="spacer"></view>
        </view>
		</view>
    </view>
</template>

<script>
import { getMembers } from '../../api/getMem';
export default {
	onReady() {
		this.getMyFamlies()
		console.log(this.$store.state.user)
	},
  data() {
    return {
			 curr : {
				 avator : this.$store.state.user.avatar,
				 name : this.$store.state.user.name
			 },
       users:[]
    }
  },
  methods: {
		pickMem(user){
			this.$store.commit("SET_CURR_ID",user.id)
			this.$store.commit("SET_NAME",user.name)
			this.curr.avator = user.avatar
			this.curr.name = user.name
		},
		getMyFamlies() {
			getMembers().then(res => {
				this.users = res.famlies
				console.log(this.users)
			}).catch(err => {
				console.log(err)
				console.log("获取成员信息失败")
			})
		},
    showDeleteModal(user) {
      uni.showModal({
        title: '确定删除该成员吗？',
        content: '删除成员后，该成员的所有测量数据会被全部删除',
				confirmColor: '#17A8E4',
        success: (res) => { // 使用箭头函数确保正确的上下文
              if (res.confirm) {
                // 执行删除用户操作
                this.users.splice(index, 1); // 从数组中删除用户信息
              }
            }
      });
    }
  }
}
</script>

<style scoped>
.page {
  flex-direction: column;
  background-color: #f3f6f8;
  background-image: linear-gradient(179.7deg, #17a8e4 0.2%, #94d6e2 24.4%, #ffffff 38.9%, #ffffff 70.5%);
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}

.section {
  background-image: linear-gradient(179.7deg, #17a8e4 0.2%, #94d6e2 24.4%, #ffffff 38.9%, #ffffff 70.5%);
  width: 750rpx;
  height: 1334rpx;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.font {
  font-size: 35rpx;
  font-family: Inter;
  line-height: 35rpx;
}
.text {
  color: #ffffff;
  font-weight: 600;
  line-height: 38rpx;
}
.pos {
  position: absolute;
  left: 50%;
  top: 40rpx;
  transform: translateX(-50%);
}
.divider {
  background-color: #ffffff;
  height: 4rpx;
}
.pos_2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 120rpx;
}
.section_2 {
  background-color: #fffffff0;
  border-radius: 20rpx;
  box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.2);
  margin-left: 3%;
  margin-right: 3%;
}
.pic {
  border-radius: 20rpx 0rpx 0rpx 20rpx;
  width: 150rpx;
  height: 150rpx;
}
.text_2 {
  margin-left: 12rpx;
  color: #4c4c4c;
}
.text_3 {
  color: #646464;
  font-size: 25rpx;
  font-family: Inter;
  line-height: 35rpx;
}
.wrapper {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin: 0 16rpx 0 50rpx;
  padding: 10rpx;
  background-color: #17a8e4;
  border-radius: 12rpx;
  height: 50rpx;
}
.spacer {
  height: 40rpx; /* 间距高度 */
}
</style>
